<template>
  <div>
    <el-card class="box-card">
      <!-- 头部区域 -->
      <template #header>
        <div class="header">
          <span>学生作业</span>
        </div>
      </template>
      <el-row>
        <el-col :span="12" v-for="(item, index) in subwork" :key="index">
          <el-card shadow="hover" style="background: floralwhite;margin-top: 20px;margin-left:8px ;"  :style="{ backgroundColor: colorMap[item.status] }">
            <div slot="header" style="color: coral">{{ item.name }}</div>
            <div>作业状态:&nbsp;{{ item.status }}</div>
            <div>&nbsp;</div>
            <div>提交时间:&nbsp;{{ item.subtime }}</div>
            <div class="coldiv" style="display: flex;justify-content: right;">
              <el-button type="primary" @click="review(item.homeworkid, item.stuid)" >查看作业</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-empty v-if="this.subwork == ''" description="暂无学生提交的作业信息！" style="display: flex"></el-empty>

    </el-card>

  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      homeworkId: this.$route.query.homeworkId,
      classId: this.$route.query.classId,
      subwork: {

      }
    }
  },
  methods: {
    //查看作业
    review(homeworkid, stuid) {
      this.$router.push({ path: '/ReviewWork:homeworkId:stuId', query: { homeworkId: homeworkid, stuId: stuid } });
    },
    getSubWork() {
      request.get("/subwork/ByworkId", {
        params: {
          id: this.homeworkId
        }
      }).then(res => {
        if (res.data.code == '0') {
          console.log(res.data.data)
          this.subwork = res.data.data
        } else {
          this.$message.error("获取失败")
        }
      })
    }
  },
  created() {
    this.getSubWork()
  },
  computed: {
    colorMap() {
      return {
        '未批改': 'floralwhite', // 类型1对应的背景色
        '已批改': 'rgb(132, 197, 225)', // 类型2对应的背景色
      };
    }
  }
}
</script>

<style></style>